<script setup lang="ts" name="Home">
import { Search } from '@element-plus/icons-vue';
import { useHomeStore } from '@/stores';
import { storeToRefs } from 'pinia';
import {useRoute} from 'vue-router'
// 使用pinia进行数据管理
const { searchContent } = storeToRefs(useHomeStore())
const { searchClick } = useHomeStore()
function Wuwuwu(){
  ElMessage.success('wwwwww~~')
}
// 接收路由传递的参数
const apiDetial = useRoute().query

</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="search">
      <!-- 搜索框 -->
      <el-input class="el-input" v-model="searchContent" placeholder="请输入api名称、描述、类型、创建人名称…" size="default"
        @keyup.enter="searchClick()">
        <template #append>
          <el-button :icon="Search" @click="searchClick()" />
        </template>
      </el-input>
    </div>
    <!-- 下面展示api具体信息 -->
    <div class="api-detail">
      <div style="width: 50%;border:black 1px solid;">
        <div class="api-card">
          <el-button type="success" @click="Wuwuwu()">没有前端，我真是懒得写样式了，呜呜呜……</el-button>
        </div>
        <h3>{{ apiDetial?.name }}</h3>
        <p><strong>API 接口地址:</strong> {{ apiDetial?.url }}</p>
        <p><strong>API 描述:</strong> {{ apiDetial?.description }}</p>
        <p><strong>API 类型:</strong> {{ apiDetial?.method }}</p>
        <p><strong>API 请求头:</strong>
        <pre>{{ apiDetial?.requestHeader }}</pre>
        </p>
        <p><strong>API 评分:</strong> {{ apiDetial?.score }} <span class="star-icon">&#9733;</span></p>
        <p><strong>API 状态:</strong> {{ apiDetial?.status }}</p>
        <p><strong>创建人:</strong> {{ apiDetial?.userNickName }} </p>
        <p><strong>创建时间:</strong> {{ apiDetial?.createTime }}</p>
      </div>

    </div>
  </div>


</template>
<style scoped>
.search {
  height: 150px;
  background-color: skyblue;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  /** 使其在y轴中心 */
}

.search .el-input {
  width: 400px;
  text-align: center;
}

.api-detail {
  display: flex;
  justify-content: center;

}

.api-card {
  display: flex;
  justify-content: center;
}
</style>